<template>
  <div class="auto">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <p class="bg-info text-center" style="padding: 8px;">其他收费信息</p>
        <div class="row" style="margin-top:10px;">
          <label for="f_brand_spec" class=" col-sm-2 control-label">收费类型:</label>
          <div class="col-sm-2 disabled" id="f_brand_spec">
            <v-select id="f_brand_spec"
            v-model="model.f_brand_spec"
            placeholder='材料'
            :value.sync="model.f_brand_spec"
            :options='brandspec'
            close-on-select clear-button>
          </v-select>
          </div>
          <!-- <label for="f_charge_type" class=" col-sm-1 control-label">打印格式:</label>
          <div class="col-sm-2 disabled" id="f_charge_type">
            <v-select id="f_charge_type"
            v-model="model.f_charge_type"
            placeholder='请选择'
            :value.sync="model.f_charge_type"
            :options='chargetype'
            close-on-select clear-button>
          </v-select>
          </div> -->
        </div>
        <div class="row" style="margin-top:10px;">
          <!-- <div :class="[$v.f_unitprice.required > 0 ? 'has-error' : 'has-success']"> -->
            <label style="" for="f_unitprice" class=" col-sm-2 control-label">单价:</label>
            <div class="col-sm-2">
              <input  class="form-control" type="number" min = "0" v-model="model.f_unitprice" placeholder="单价" v-next-el='sl'>
            </div>
          <!-- </div>
          <div  :class="[$v.f_number.required ? 'has-error' : 'has-success']"> -->
            <label style="" for="f_number" class="col-sm-1  control-label">数量:</label>
            <div class="col-sm-2">
              <input  class="form-control" style="" type="number" min='0' v-model="model.f_number" placeholder="数量" v-next-el='sk' v-el:sl>
            </div>
          <!-- </div> -->
          <div  :class="[$v.f_collection.required ? 'has-error' : 'has-success']">
            <label style="" for="f_collection" class="col-sm-1 col-sm-offset-1 control-label">收款:</label>
            <div class="col-sm-2">
              <input class="form-control " type="number" min = "0" v-model="model.f_collection"
                v-validate:f_collection='{required: true }' placeholder="0"  v-el:sk>
            </div>
          </div>
          <!-- <label style="" for="f_collection" class="col-sm-1 col-sm-offset-1 control-label">收款:</label>
          <div class="col-sm-2">
            <input class="form-control " type="number" min = "0" v-model="collection" placeholder="0" disabled v-el:sk>
          </div> -->
        </div>
        <div class="row" style="margin-top:10px;">
          <div :class="[$v.f_note.required ? 'has-error' : 'has-success']">
            <label for="f_note" class=" col-sm-2 control-label">备注:</label>
            <div class="col-sm-9">
              <textarea style="width:100%" class="form-control" v-model="model.f_note" rows="3"
              v-validate:f_note='{required: true }' placeholder="备注"></textarea>
            </div>
          </div>
        </div>
      </form>
      <print-other-charge-bill :show="print" v-ref:printbill :row='row' :logic='model' v-on:success="close" v-on:toggle="close"></print-other-charge-bill>
      <!-- <tax-other-bill :show="taxprint"  v-ref:taxprintbill :row='row' :logic='model' v-on:success="close" v-on:toggle="close"></tax-other-bill> -->
      <div style="text-align:right;margin-top:30px;margin-right:50px;">
        <button class="btn btn-success" @click="confirm()"  :disabled='!$v.valid' id='components-comOpe-othCha-确认'>确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
        <button class="btn btn-default" @click="clean()" style="width:80px;margin-left:20px;" id='components-comOpe-othCha-取消'>取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
      </div>
    </validator>
  </div>
</template>
<script>
import AppData from '../../../../../stores/AppData'

export default {
  title: '其他收费',
  data () {
    return {
      model: {
        f_charge_type: ['国税发票'],
        f_brand_spec: ['置换气费'],
        f_number: 0,
        f_unitprice: 0,
        f_collection: 0
      },
      print: false,
      taxprint: false,
      isConfirm: true
    }
  },
  props: ['row'],
  ready () {
    this.model.f_unitprice = AppData.getSingleValue('置换气费')
  },
  watch: {
    'model.f_unitprice' (val) {
      this.model.f_collection = (((val - 0) * (this.model.f_number - 0)) - 0).toFixed(2)
    },
    'model.f_number' (val) {
      this.model.f_collection = (((val - 0) * (this.model.f_unitprice - 0)) - 0).toFixed(2)
    },
    'model.f_brand_spec' (val) {
      if (val[0]) {
        this.model.f_unitprice = AppData.getSingleValue(val[0]) ? AppData.getSingleValue(val[0]) : 0
      }
    }
  },
  methods: {
    confirm () {
      if (!this.isConfirm) {
        return
      }
      this.isConfirm = false
      this.$LogicService.otherCharge(this.model, this.row)
      .then(
        (res) => {
          this.$dispatch('success', '其他收费', this.row, res)
          // if (this.model.f_charge_type[0] !== '国税发票') {
          //   this.row.id = res.data.id
          //   this.row.f_bill_type = '其他收费'
          //   // this.print = true
          //   this.row.f_bill_style = this.model.f_charge_type[0]
          //   this.$refs.printbill.taxbill.search(res.data.id)
          // } else {
          //   this.row.id = res.data.id
          //   this.row.f_bill_type = '其他收费'
          //   // this.print = true
          //   this.$refs.printbill.bill.search(res.data.id)
          // }
        }
      ).catch(
        (error) => this.$dispatch('error', '其他收费', this.row, error)
      )
    },
    clean () {
      this.$dispatch('clean', this.row)
    },
    close () {
      this.taxprint = false
      this.print = false
      this.clean()
    }
  },
  computed: {
    brandspec () {
      return AppData.getParam('品名及规格')
    },
    chargetype () {
      return AppData.getParam('打印格式')
    }
  }
}
</script>

<style>
</style>
